<template>
<!-- 线下展位直播 -->
  <div class="offline">
    <div class="offline_box">
      <div class="title">
        <div class="leftTile">审核结果</div>
        <div class="rightTile">
          <button @click="dialogTableVisible = true">新增申请</button>
        </div>
      </div>
      <div class="listBox">
        <div class="listTitle">
          <div class="titleName" v-for="(item,index) in offList" :key="index">{{item.name}}</div>
          <div class="titles">主题</div>
          <div>概述</div>
          <div class="select">
            <el-select
              v-model="value"
              filterable
              multiple
              name="状态"
              placeholder="状态"
              style="height:0.4rem !important;"
            >
              <!-- <span style="font-size:0.16rem;">状态</span> -->
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
        </div>
        <div class="itemList" v-for="(item,index) in itemList" :key="index">
          <div>{{index+1}}</div>
          <div>{{item.pavilion}}</div>
          <div>{{item.boothNumber}}</div>
          <div>{{item.liveDate|Date}}</div>
          <div>{{item.liveDate|formatDate}}</div>
          <div>{{item.hour}}</div>
          <div class="titles">{{item.streamName}}</div>
          <div>{{item.overview}}</div>
          <div>{{item.liveState}}</div>
        </div>
        <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                layout="prev, pager, next"
                :total="30"
        ></el-pagination>
      </div>
    </div>

    <!-- 弹窗 -->
    <el-dialog :visible.sync="dialogTableVisible" center width="60%">
      <div class="offine-list">
        <div class="dialogBox">
          <div class="list-left">
            <div class="top">
              <div class="left">
                <span>直播主题</span>
                <input type="text" v-model="valueOne" class="inputOne" />
              </div>
            </div>
            <!-- 直播概述 -->
            <div class="summarize">
              <div class="test">直播概述</div>
              <!-- <input type="text" class="inputSummarize" /> -->
              <el-input type="textarea" :rows="2" v-model="textarea"></el-input>
            </div>
            <div class="time">
              <div class="title">直播时间</div>
              <div class="block">
                <el-date-picker
                        v-model="value1"
                        type="datetime"
                        placeholder="选择日期时间">
                </el-date-picker>

              </div>

            </div>
            <div class="duration">
              <div class="title">时长</div>
              <input type="text" v-model="input" name id />
            </div>
          </div>
          <div class="list-right">
            <div class="right">添加海报</div>
            <div class="itemBox">
              <el-upload
                name="upload_file"
                class="avatar-uploader"
                action="/api/expo/exhibitor/file"
                :data="fileData"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
                v-model="subImages"

                multiple
              >
                <img style="width: 300px;height: 260px" v-if="imageUrl" :src="imageUrl" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                <div class="btn" style="width:3rem;">
                  <button size="small" type="primary" style="margin-top:0.3rem;margin-left:1rem;">上传图片</button>
                </div>
              </el-upload>
            </div>
<!--            <el-upload-->
<!--              class="upload-demo"-->
<!--              action="/api/expo/exhibitor/addedlive"-->
<!--              :on-preview="handlePreview"-->
<!--              :on-remove="handleRemove"-->
<!--              :before-remove="beforeRemove"-->
<!--              multiple-->
<!--              :limit="3"-->
<!--              :on-exceed="handleExceed"-->
<!--              :file-list="fileList"-->
<!--            >-->
<!--           -->
<!--            </el-upload>-->

          </div>
        </div>
        <!-- 底部提交 -->
        <div class="bottom">
          <div class="ti" @click="add()">提交</div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {boothlive, onlineLive,shiftLive,shifimg} from "../../request/home";

  export default {
  name: "offline",
  data() {
    return {
      baseURL: window.uploadUrl,
      subImages:"",
      input:"",
      itemList: [
        // {
        //   num1: "E1",
        //   num2: "A103",
        //   date: "4.13",
        //   start: "10:00 am",
        //   times: "2小时",
        //   title: "3D打印技术在机床领域的应用",
        //   des: "机床领域...",
        //   status: "同意",
        // },
        // {
        //   num1: "E1",
        //   num2: "A103",
        //   date: "4.13",
        //   start: "10:00 am",
        //   times: "2小时",
        //   title: "3D打印技术在机床领域的应用",
        //   des: "机床领域...",
        //   status: "审核中",
        // },
        // {
        //   num1: "E1",
        //   num2: "A103",
        //   date: "4.13",
        //   start: "10:00 am",
        //   times: "2小时",
        //   title: "3D打印技术在机床领域的应用",
        //   des: "机床领域...",
        //   status: "未通过",
        // },
        // {
        //   num1: "E1",
        //   num2: "A103",
        //   date: "4.13",
        //   start: "10:00 am",
        //   times: "2小时",
        //   title: "3D打印技术在机床领域的应用",
        //   des: "机床领域...",
        //   status: "同意",
        // },
        // {
        //   num1: "E1",
        //   num2: "A103",
        //   date: "4.13",
        //   start: "10:00 am",
        //   times: "2小时",
        //   title: "3D打印技术在机床领域的应用",
        //   des: "机床领域...",
        //   status: "未通过",
        // },
        // {
        //   num1: "E1",
        //   num2: "A103",
        //   date: "4.13",
        //   start: "10:00 am",
        //   times: "2小时",
        //   title: "3D打印技术在机床领域的应用",
        //   des: "机床领域...",
        //   status: "审核中",
        // },
        // {
        //   num1: "E1",
        //   num2: "A103",
        //   date: "4.13",
        //   start: "10:00 am",
        //   times: "2小时",
        //   title: "3D打印技术在机床领域的应用",
        //   des: "机床领域...",
        //   status: "未通过",
        // },
        // {
        //   num1: "E1",
        //   num2: "A103",
        //   date: "4.13",
        //   start: "10:00 am",
        //   times: "2小时",
        //   title: "3D打印技术在机床领域的应用",
        //   des: "机床领域...",
        //   status: "同意",
        // },
      ],
      fileData: {
        userId: localStorage.getItem("userInfo") ? JSON.parse(localStorage.getItem("userInfo")).id : '',
      },
      value: [],
      options: [
        {
          value: "选项1",
          label: "同意",
        },
        {
          value: "选项2",
          label: "审核中",
        },
        {
          value: "选项3",
          label: "未通过",
        },
      ],
      offList: [
        { name: "申请序号" },
        { name: "展馆号" },
        { name: "展位号" },
        { name: "日期" },
        { name: "开始时间" },
        { name: "时长" },
      ],
      valueOne: "",
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      valueTwo: "",
      value1: new Date(),
      value2: "",
      imageUrl: "",
      fileList: [],
      textarea: "",
      dialogTableVisible: false,
      dialogFormVisible: false,
      pagesize:10
    };
  },
    mounted() {
    this.save()
      console.log(this.imageUrl)
      boothlive({ pageNum: 1, pageSize: 10 }).then(res=>{
        console.log(res)
        this.itemList=res.data.data.list
        
      })
    },
 filters: {
    formatDate: function (value) {
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? ('0' + MM) : MM;
      let d = date.getDate();
      d = d < 10 ? ('0' + d) : d;
      let h = date.getHours();
      h = h < 10 ? ('0' + h) : h;
      let m = date.getMinutes();
      m = m < 10 ? ('0' + m) : m;
      let s = date.getSeconds();
      s = s < 10 ? ('0' + s) : s;
      return  h + ':' + m ;
    },
    Date: function (value) {
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? ('0' + MM) : MM;
      let d = date.getDate();
      d = d < 10 ? ('0' + d) : d;
      let h = date.getHours();
      h = h < 10 ? ('0' + h) : h;
      let m = date.getMinutes();
      m = m < 10 ? ('0' + m) : m;
      let s = date.getSeconds();
      s = s < 10 ? ('0' + s) : s;
      return  y + '-' + MM + '-' +d;
    },
  },
    methods: {
      handleCurrentChange(val) {
        console.log(val)
        boothlive({ pageNum: val, pageSize: this.pagesize }).then((res) => {

          this.total=res.data.data.total
          console.log(this.total)
          this.itemList = res.data.data.list;
        });
      },
      handleSizeChange(val) {
        this.pagesize = val;
      },
    save(){
      boothlive({ pageNum: 1, pageSize: 10 }).then(res=>{
        console.log(res)
        this.itemList=res.data.data.list
        this.itemList.forEach(e => {
          if(e.liveState==1){
            e.liveState="同意"
          }else{
            e.liveState="审核中"
          }
          if(e.liveState==3){
            e.liveState="未通过"
          }
        });
      })
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
      handleAvatarSuccess (res, file) {
        this.imageUrl = URL.createObjectURL(file.raw)
      },
      beforeAvatarUpload (file) {

        console.log(file)
        const isIMG =
                file.type === 'image/jpg' ||
                file.type === 'image/jpeg' ||
                file.type === 'image/png'
        const isLt = file.size / 1024 / 1024 < 5;
        if (!isIMG) {
          this.$message.error('上传头像图片只支持jpg、jpeg、png格式!')
        }
        if (!isLt) {
          this.$message.error('上传头像图片大小不能超过5MB!')
        }

        return isLt && isIMG
      },
     add(){
        this.dialogTableVisible = false
        var list={
          id:1,
          hour:this.input,
          streamName:this.valueOne,
          overview:this.textarea,
          stringDate:this.value1,
        }
        shiftLive(list).then(res=>{

        })
     },
      // imageChange(param,type){
      //   console.log(param);
      //   var list={
      //     file:this.imageUrl
      //   }
      //   // let formData = new FormData()
      //   // formData.append('file', param.file)
      //   // formData.append("fileId", '文件ID')// 额外参数
      //   shifimg(list).then(res => {
      //     console.log(res);
      //
      //   });
      //   // console.log(this.imgList);
      // },
  },
};
</script>
<style lang="less" scoped>
.offline {
  width: 15.8rem;

  // background: chartreuse;
  background: #ffffff;
  margin-left: 0.3rem;
  .offine-list {
    padding-bottom: 2rem;
    .dialogBox {
      display: flex;
    }
    .list-left {
      margin-left: 0.65rem;
      padding-right: 1.27rem;
      .top {
        margin-top: 0.37rem;
        display: flex;
        align-items: center;
        .left {
          align-items: center;
          display: flex;
          span {
            padding-right: 0.35rem;
            // margin: 0 0.2rem 0 0.4rem;
            font-size: 0.18rem;
            font-weight: 400;
            color: rgba(0, 76, 179, 1);
          }
          .inputOne {
            width: 2rem;
            height: 0.4rem;
          }
        }
      }
      .summarize {
        padding-top: 0.58rem;
        display: flex;
        // margin-right: 1.68rem;
        .test {
          font-size: 0.18rem;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: rgba(0, 76, 179, 1);
          // margin: 0 0.2rem 0 0.4rem;
          padding-right: 0.35rem;
        }
        .inputSummarize {
          width: 3rem;
          height: 2rem;
        }
        /deep/.el-textarea {
          width: 3rem;
          height: 2rem;
          .el-textarea__inner {
            width: 3rem;
            height: 2rem;
            border: 1px solid #999999;
          }
        }
      }
      .time {
        display: flex;
        padding-top: 0.45rem;
        .title {
          color: rgba(0, 76, 179, 1);
          font-size: 0.18rem;
          padding-right: 0.35rem;
          line-height: 0.4rem;
        }
        .block {
          padding-right: 0.4rem;
        }
        /deep/ .el-date-editor.el-input,
        .el-date-editor.el-input__inner {
          width: 1.7rem;
        }
      }
      .duration {
        display: flex;
        padding-top: 0.27rem;
        .title {
          width: 0.7rem;
          text-align: right;
          color: rgba(0, 76, 179, 1);
          font-size: 0.18rem;
          padding-right: 0.35rem;
          line-height: 0.4rem;
        }
      }
      /deep/ input {
        outline: none;
        border: 1px solid #999999;
      }
    }
    .list-right {
      .right {
        text-align: center;
        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(0, 76, 179, 1);
        margin-top: 0.36rem;
        margin-bottom: 0.21rem;
      }
      .itemBox {
        width: 3rem;
        height: 2.6rem;
        margin: 0 auto;
        /deep/ .avatar-uploader-icon[data-v-5adfdacc] {
          background: #fff;
        }
        /deep/ .el-icon-plus:before {
          line-height: 2.6rem;
        }
        .avatar-uploader .el-upload {
          border: 0.01rem dashed #d9d9d9;
          border-radius: 0.06rem;
          cursor: pointer;
          position: relative;
          overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
          border-color: #409eff;
        }
        .avatar-uploader-icon {
          font-size: 0.28rem;
          color: #8c939d;
          width: 3rem;
          height: 2.6rem;
          line-height: 1.78rem;
          text-align: center;
          border: 1px solid rgba(204, 204, 204, 1);
        }
        .avatar {
          width: 1.78rem;
          height: 1.78rem;
          display: block;
        }
      }
      button {
        margin: 0 auto;
        margin-top: 0.3rem;
        // width:0.9rem;
        height: 0.4rem;
        background: rgba(253, 95, 0, 1) !important;
        border-radius: 0.05rem;
        color: #fff;
        font-weight: bold;
        font-size: 0.16rem;
        outline: none;
        border: none;
        padding: 0 0.28rem;
      }
    }
  }

  .bottom {
    width: 100%;
    height: 0.5rem;
    // background: royalblue;
    display: flex;
    .ti {
      width: 1.6rem;
      height: 0.5rem;
      background: rgba(0, 76, 179, 1);
      border-radius: 0.05rem;
      font-size: 0.18rem;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      text-align: center;
      line-height: 0.5rem;
      margin: 0 auto;
      margin-top: 1.43rem;
    }
  }
  .audit {
    display: flex;
    width: 15.8rem;
    // height: 1.2rem;
    height: 30px;
    align-items: center;
    // background: #f1f1f1;
    // margin-top: 0.8rem;
    background: #ffffff;
    margin-top: 50px;
    //  margin-bottom: 30px;
    .one {
      margin-left: 0.4rem;
      color: #e80037;
    }
    .two {
      margin: 0 1.45rem 0 0.64rem;
      color: #004cb3;
    }
    .three {
      color: #004cb3;
    }
  }
}
.avatar-uploader .el-upload {
  border-radius: 0.06rem;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  float: right;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 0.28rem;
  color: #8c939d;
  width: 3rem;
  height: 3rem;
  line-height: 1.78rem;
  text-align: center;
  border: 0.01rem solid rgba(204, 204, 204, 1);
  background: rgba(0, 0, 0, 0.3);
}
.avatar {
  width: 1.78rem;
  height: 1.78rem;
  display: block;
}
.offline_box {
  width: 15.8rem;

  background: rgba(255, 255, 255, 1);
  border-radius: 0.08rem;
  padding-top: 0.3rem;
  padding-left: 0.4rem;
  box-sizing: border-box;
  .title {
    width: 12rem;
    // background-color: pink;
    font-size: 0.18rem;
    font-weight: 400;
    color: rgba(0, 76, 179, 1);
    line-height: 0.3rem;
    display: flex;
    justify-content: space-between;
    padding-bottom: 0.2rem;
    button {
      width: 1rem;
      height: 0.4rem;
      background: rgba(0, 76, 179, 1);
      border-radius: 0.05rem;
      font-size: 0.18rem;
      font-weight: bold;
      color: rgba(255, 255, 255, 1);
      border: none;
      outline: none;
    }
  }
  .listBox {
    width: 12rem;
    .listTitle {
      display: flex;
      height: 0.4rem;
      border: 1px solid rgba(204, 204, 204, 1);
      font-size: 0.16rem;
      div {
        flex: 10%;
        text-align: center;
        line-height: 0.4rem;
      }
      .titles {
        flex: 20%;
        line-height: 0.4rem;
      }
      /deep/ .el-input__inner {
        -webkit-appearance: none;
        background-color: #fff;
        background-image: none;
        border-radius: 4px;
        border: none;
        box-sizing: border-box;
        color: #606266;
        display: inline-block;
        font-size: inherit;
        height: 0.4rem;
        line-height: 0.4rem;
        outline: 0;
        padding: 0 15px;
        transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
        width: 50%;
      }
      /deep/ .el-input__icon {
        height: 0.4rem;
        width: 0.25rem;
        line-height: 0.4rem;
        text-align: center;
        transition: all 0.3s;
        line-height: 0.4rem;
      }
      /deep/ .offline_box .listBox[data-v-5adfdacc] .el-input__inner {
        height: 0.4rem !important;
        color: #000 !important;
        display: inline-block;
        height: 0.4rem;
        line-height: 0.4rem;
        z-index: 999999;
      }
      /deep/ .offline_box .listBox .listTitle[data-v-5adfdacc] .el-input__inner {
        padding: 0 0.15rem;
        transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
        width: 70%;
      }
      /deep/.el-input,
      .el-input--suffix {
        input {
          width: 70%;
          height: 0.3rem !important;
          // border-bottom: 0.01rem solid rgba(204, 204, 204, 1);
          color: #333333;
          font-size: 0.16rem;
        }
        ::-webkit-input-placeholder {
          /* WebKit, Blink, Edge */
          color: #333333;
          text-align: center;
        }
      }
    }
    .itemList {
      display: flex;
      div {
        height: 0.5rem;
        flex: 10%;
        text-align: center;
        line-height: 0.5rem;
        font-size: 0.14rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .titles {
        flex: 20%;
        // height: 0.5rem;
      }
    }
  }
}
</style>
